<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <title>城市医院预约平台</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <div class="top">
      <div class="top-wrapper">
        <p class="call">010-114/116114电话预约</p>
        <p class="welcome">
          欢迎来到城市预约挂号统一平台
          <a href="#">登录</a>
          <a href="#">注册</a>
          <a href="#">帮助中心</a>
        </p>
      </div>
    </div>
    <div class="header">
      <div class="header-wrapper">
        <a href="#" class="logo">
          <img src="./img/logo.jpg" alt="logo" width="93" height="75" />
          <div class="title">北京市预约挂号统一平台</div>
        </a>
        <div class="search">
          <div class="search-select">医院</div>
          <div class="search-select-list">
            <a href="#" class="search-select-item">科室</a>
            <a href="#" class="search-select-item">疾病</a>
            <a href="#" class="search-select-item">医院</a>
          </div>
          <input
            type="text"
            name="search-content"
            class="search-input"
            placeholder="请输入搜索内容"
          />
          <a href="#" class="search-submit">&nbsp;</a>
        </div>
      </div>
    </div>
    <div class="nav">
      <div class="nav-wrapper">
        <div class="link menu">
          全部科室
          <div class="menu-list"></div>
        </div>
        <a href="#" class="link">按医院挂号</a>
        <a href="#" class="link">按科室挂号</a>
        <a href="#" class="link">按疾病挂号</a>
        <a href="#" class="link">最新公告</a>
        <a href="#" class="link right">社会知名医院</a>
      </div>
    </div>
    <div class="banner">
      <div class="banner-slider">
        <div class="slider-wrapper">
          <a href="#"
            ><img src="./img/banner_1.jpg" alt="banner-1" class="slider-item"
          /></a>
          <a href="#"
            ><img src="./img/banner_2.jpg" alt="banner-2" class="slider-item"
          /></a>
          <a href="#"
            ><img src="./img/banner_3.jpg" alt="banner-3" class="slider-item"
          /></a>
        </div>
        <div class="slider-arrow">
          <a href="#" class="arrow-item left">&nbsp;</a>
          <a href="#" class="arrow-item right">&nbsp;</a>
        </div>
        <div class="slider-dot">
          <a href="#" class="dot-item dot-item_focus">&nbsp;</a>
          <a href="#" class="dot-item">&nbsp;</a>
          <a href="#" class="dot-item">&nbsp;</a>
        </div>
      </div>
      <div class="banner-search">
        <div class="caption">
          <span class="text">快速预约</span>
        </div>
        <div class="search-form">
          <div class="line">
            <select name="area" data-method="getDistinctArea" data-selected="">
              <option>医院地区</option>
              <option>医院地区1</option>
            </select>
          </div>
          <div class="line">
            <select name="leave" data-method="getLevelByArea" data-selected="">
              <option>医院等级</option>
              <option>医院等级2</option>
            </select>
          </div>
          <div class="line">
            <select
              name="name"
              data-method="getNameByAreaAndLevel"
              data-selected=""
            >
              <option>医院名称</option>
              <option>医院名称3</option>
            </select>
          </div>
          <div class="line">
            <select
              name="department"
              data-method="getDepartmentArrByHospitalName"
              data-selected=""
            >
              <option>医院科室</option>
              <option>医院科室4</option>
            </select>
          </div>
        </div>
        <div class="submit">
          <input type="button" class="button" value="快速查询" />
        </div>
      </div>
      <div class="banner-help">
        <div class="caption">
          <span class="text">帮助中心</span>
        </div>
        <div class="list">
          <a href="#" class="link">账号指南</a>
          <a href="#" class="link">预约指南</a>
          <a href="#" class="link">账号找回</a>
          <a href="#" class="link">常见问题</a>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="content-wrapper clearfix">
        <div class="content-tab">
          <div class="caption">
            <a href="#" class="item item_focus">医院</a>
            <a href="#" class="item">科室</a>
          </div>
          <div class="block">
            <div class="item">
              <div class="block-caption">
                <a href="#" class="block-caption-item block-caption-item_focus"
                  >全部</a
                >
                <a href="#" class="block-caption-item">东城区</a>
                <a href="#" class="block-caption-item">西城区</a>
                <a href="#" class="block-caption-item">朝阳区</a>
                <a href="#" class="block-caption-item">丰台区</a>
                <a href="#" class="block-caption-item">石景山区</a>
                <a href="#" class="block-caption-item">海淀区</a>
                <a href="#" class="block-caption-item">门头沟区</a>
                <a href="#" class="block-caption-item">房山区</a>
                <a href="#" class="block-caption-item">其他</a>
              </div>
              <div class="block-content-wrapper">
                <div class="block-content">
                  <div class="block-content-list clearfix">
                    <div class="block-content-item">
                      <img src="./img/hospital-1.jpg" alt="xx医院" />
                      <div class="item-name">
                        北京协和医院
                        <span class="item-level">【三级甲等】</span>
                      </div>
                      <div class="item-phone">
                        电话：东院咨询台：010-66669999...
                      </div>
                      <div class="item-address">
                        【东院】北京市东城区帅府园1号【西院】北京市西城区大木仓...
                      </div>
                    </div>
                    <div class="block-content-item">
                      <img src="./img/hospital-1.jpg" alt="xx医院" />
                      <div class="item-name">
                        北京协和医院
                        <span class="item-level">【三级甲等】</span>
                      </div>
                      <div class="item-phone">
                        电话：东院咨询台：010-66669999...
                      </div>
                      <div class="item-address">
                        【东院】北京市东城区帅府园1号【西院】北京市西城区大木仓...
                      </div>
                    </div>
                    <div class="block-content-item">
                      <img src="./img/hospital-1.jpg" alt="xx医院" />
                      <div class="item-name">
                        北京协和医院
                        <span class="item-level">【三级甲等】</span>
                      </div>
                      <div class="item-phone">
                        电话：东院咨询台：010-66669999...
                      </div>
                      <div class="item-address">
                        【东院】北京市东城区帅府园1号【西院】北京市西城区大木仓...
                      </div>
                    </div>
                    <div class="block-content-item">
                      <img src="./img/hospital-1.jpg" alt="xx医院" />
                      <div class="item-name">
                        北京协和医院
                        <span class="item-level">【三级甲等】</span>
                      </div>
                      <div class="item-phone">
                        电话：东院咨询台：010-66669999...
                      </div>
                      <div class="item-address">
                        【东院】北京市东城区帅府园1号【西院】北京市西城区大木仓...
                      </div>
                    </div>
                  </div>
                  <div class="block-text-list clearfix">
                    <a href="#" class="block-text-item">
                      首都儿科研究所附属儿童医院
                      <span class="item-level">【三级甲等】</span>
                    </a>
                    <a href="#" class="block-text-item">
                      首都儿科研究所附属儿童医院
                      <span class="item-level">【三级甲等】</span>
                    </a>
                    <a href="#" class="block-text-item">
                      首都儿科研究所附属儿童医院
                      <span class="item-level">【三级甲等】</span>
                    </a>
                    <a href="#" class="block-text-item">
                      首都儿科研究所附属儿童医院
                      <span class="item-level">【三级甲等】</span>
                    </a>
                    <a href="#" class="block-text-item">
                      首都儿科研究所附属儿童医院
                      <span class="item-level">【三级甲等】</span>
                    </a>
                    <a href="#" class="block-text-item">
                      首都儿科研究所附属儿童医院
                      <span class="item-level">【三级甲等】</span>
                    </a>
                  </div>
                  <a class="block-more">更多医院</a>
                </div>
                <div class="block-content" style="display: none">
                  其他城区医院内容
                </div>
                <div class="block-content" style="display: none">
                  其他城区医院内容
                </div>
                <div class="block-content" style="display: none">
                  其他城区医院内容
                </div>
                <div class="block-content" style="display: none">
                  其他城区医院内容
                </div>
                <div class="block-content" style="display: none">
                  其他城区医院内容
                </div>
                <div class="block-content" style="display: none">
                  其他城区医院内容
                </div>
                <div class="block-content" style="display: none">
                  其他城区医院内容
                </div>
                <div class="block-content" style="display: none">
                  其他城区医院内容
                </div>
                <div class="block-content" style="display: none">
                  其他城区医院内容
                </div>
              </div>
            </div>
            <div class="item" style="display: none">科室内容</div>
          </div>
        </div>
        <div class="content-news">
          <div class="caption">
            最新公告
            <a href="#" class="more">|更多</a>
          </div>
          <div class="list">
            <a href="#" class="link">阜外医特需门诊暂停更新号源通...</a>
            <a href="#" class="link">防护策略升级通知</a>
            <a href="#" class="link">阜外医特需门诊暂停更新号源通...</a>
            <a href="#" class="link">防护策略升级通知</a>
            <a href="#" class="link">阜外医特需门诊暂停更新号源通...</a>
            <a href="#" class="link">防护策略升级通知</a>
          </div>
        </div>
        <div class="content-close">
          <div class="caption">
            停诊公告
            <a href="#" class="more">|更多</a>
          </div>
          <div class="list">
            <a href="#" class="link">阜外医特需门诊暂停更新号源通...</a>
            <a href="#" class="link">防护策略升级通知</a>
            <a href="#" class="link">阜外医特需门诊暂停更新号源通...</a>
            <a href="#" class="link">防护策略升级通知</a>
            <a href="#" class="link">阜外医特需门诊暂停更新号源通...</a>
            <a href="#" class="link">防护策略升级通知</a>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      @2018 hospital.com 京ICP备12345678
    </div>
    <a href="#" class="back-to-top"></a>
  </body>
</html>
